import { Suspense, lazy } from 'react';
import { Outlet } from 'react-router-dom';

import { CircleLoading } from '@/components/loading';
import SimpleLayout from '@/layouts/simple';

const Page403 = lazy(() => import('@/pages/Error/Page403'));
const Page404 = lazy(() => import('@/pages/Error/Page404'));
const Page500 = lazy(() => import('@/pages/Error/Page500'));

/**
 * error routes
 * 403, 404, 500
 */
export const ErrorRoutes = {
  element: (
    <SimpleLayout>
      <Suspense fallback={<CircleLoading />}>
        <Outlet />
      </Suspense>
    </SimpleLayout>
  ),
  children: [
    { path: '/integration/403', element: <Page403 /> },
    { path: '/integration/404', element: <Page404 /> },
    { path: '/integration/500', element: <Page500 /> },
  ],
};
